<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-button type="primary" @click="clickCreat">添加维权</el-button>
      </el-col>
      <el-col>
        <div style="display: flex; justify-content: flex-end">
          <el-input
            @clear="clear"
            clearable
            v-model="form.search"
            style="width: 300px; margin-left: 15px"
            placeholder="搜索国家、类型"
            class="input-with-select"
          >
            <el-button
              @click="searchVal"
              slot="append"
              style="
                background-color: #45a321;
                color: #fff;
                border-radius: 0;
                border: 1px solid #45a321;
              "
              >搜索</el-button
            >
            <i slot="prefix-icon" class="el-icon-search"></i>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-table
      align="center"
      :data="list.list"
      border
      style="width: 100%; margin: 20px 0"
    >
      <el-table-column align="center" prop="type" label="类型">
      </el-table-column>
      <el-table-column align="center" prop="country" label="国家">
      </el-table-column>
      <el-table-column align="center" prop="myorder" label="排序">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            class="editText"
            @click="clickEdit(scope.row.id)"
            type="text"
            >修改</el-button
          >
          <el-button
            class="deletText"
            @click="deletUser(scope.row.id)"
            type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="list.page"
        :page-size="list.size"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(list.count)"
        align="left"
      ></el-pagination>
    </div>
    <el-dialog
      title="海外维权"
      :visible.sync="dialogVisible"
       width="50%"
      top="10.8vh"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="mini">
        <div class="s_flex s_align_items news_mrt" >
          <p style="width: 15%">类型</p>
          <div class="left_w" >
            <el-select
              v-model="form.type"
              placeholder="请选择"
              @change="handeType"
              
            >
              <el-option
                v-for="item in Type"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">国家</p>
          <div class="left_w">
            <el-select
              v-model="form.country"
              placeholder="请选择"
              @change="handeCountry"
            >
              <el-option
                v-for="item in Country"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input
              v-model="form.myorder"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div v-if="form.type == 1" style="background: #fff;">
          <div class="news_mrt">
            <p>专利概述</p>
            <Editor
            style="margin-top:20px"
              :id="`test`"
              v-model="form.patent_desc"
              
            ></Editor>
          </div>
          <div class="news_mrt" >
            <p>专利申请</p>
            <Editor
            style="margin-top:20px"
              :id="`test8`"
              v-model="form.patent_apply"
              
            ></Editor>
          </div>
          <div class="news_mrt" >
            <p>专利诉讼</p>
            <Editor
            style="margin-top:20px"
              :id="`test9`"
              v-model="form.patent_litigation"
              
            ></Editor>
          </div>
          <!-- <div class="news_mrt" style="margin-top:100px">
            <p>专利异议</p>
            <Editor
              @descVal="objection"
              :clearDesc="clearDesc"
              :contentDesc="contentDesc"
            />
          </div> -->
        </div>
        <div v-if="form.type == 2">
          <div class="news_mrt">
            <p>商标申请</p>
            <Editor
            style="margin-top:20px"
              :id="`test10`"
              v-model="form.trademark_apply"
              
            ></Editor>
          </div>
          <div class="news_mrt" s>
            <p>商标诉讼</p>
            <Editor
            style="margin-top:20px"
              :id="`test11`"
              v-model="form.trademark_litigation"
              
            ></Editor>
          </div>
          <div class="news_mrt" >
            <p>商标异议</p>
            <Editor
            style="margin-top:20px"
              :id="`test12`"
              v-model="form.trademark_objection"
              
            ></Editor>
          </div>
        </div>
        <div v-if="form.type == 3">
          <div class="news_mrt">
            <p>正文</p>
            <Editor
            style="margin-top:20px"
              :id="`test13`"
              v-model="form.content"
              
            ></Editor>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import { lawList, lawAdd, lawEdit, lawDel, lawInfo } from "@/api/adminWeb.js";
import { WebGetType, WebGetCountry } from "@/api/admin";
import Editor from "@/components/Editor";
export default {
  data() {
    return {
      VUE_APP_BASE_API,
      list: [],
      dialogVisible: false,
      form: {
        law_id: "",
        title: "",
        content: "",
        search: "",
        myorder: "",
        type: "",
        country: "",
        patent_desc: "",
        patent_apply: "",
        patent_litigation: "",
        patent_objection: "",
        trademark_apply: "",
        trademark_litigation: "",
        trademark_objection: "",
      },
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
      Country: [],
      Type: [],
    };
  },
  components: {
    Editor,
  },
  computed: {
  },
  mounted() {
    this.getLIst();
    this.GetType();
    // this.GetCountry();
  },
  methods: {
    imgUpload() {
      // console.log(12312);
    },
    async handeType(val) {
      try {
        this.Country = await WebGetCountry({ type: val });
      } catch (error) {
        this.$message.error(error.message);
      }
      // this.form.patent_desc = "";
      // this.form.patent_apply = ""
      // this.form.patent_litigation = ""
      // this.form.patent_objection = "";
      // this.form.trademark_apply = "";
      // this.form.trademark_litigation = "";
      // this.form.trademark_objection = "";
    },
    handeCountry(val) {
      // console.log(val, 2);
    },
    async GetType() {
      try {
        this.Type = await WebGetType({});
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async GetCountry() {
      try {
        this.Country = await WebGetCountry({});
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    searchVal() {
      this.getLIst();
    },
    clickCreat() {
      this.dialogVisible = true;
    },
    async clickEdit(id) {
      try {
        this.form = await lawInfo({
          law_id: id,
        });
        this.Country = await WebGetCountry({ type: this.form.type });
        // this.contentDesc = this.form.content;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser(id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await lawDel({
              law_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear() {
      this.getLIst();
    },
    handleClose() {
      this.clearDesc = 1;
      this.dialogVisible = false;
    },
    async onSuccess(response, file, fileList) {
      if (response) {
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst(page=1) {
      try {
        this.list = await lawList({
          realm:this.realm,
          keyword: this.form.search,
          page
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    objection(val) {
      this.form.patent_objection = val;
    },
    litigation3(val) {
      this.form.patent_litigation = val;
    },
    litigation1(val) {
      this.form.patent_desc = val;
    },
    litigation2(val) {
      this.form.patent_apply = val;
    },
    trademarkObjection(val) {
      this.form.trademark_objection = val;
    },
    trademarkApply(val) {
      this.form.trademark_apply = val;
    },
    trademarkLitigation(val) {
      this.form.trademark_litigation = val;
    },
    descVal(val) {
      this.form.content = val;
    },
    async save() {
      try {
        if (this.form.id) {
          await lawEdit({
            law_id: this.form.id,
            content: this.form.content,
            myorder: this.form.myorder,
            type: this.form.type,
            country: this.form.country,
            patent_desc: this.form.patent_desc,
            patent_apply: this.form.patent_apply,
            patent_litigation: this.form.patent_litigation,
            patent_objection: this.form.patent_objection,
            trademark_apply: this.form.trademark_apply,
            trademark_litigation: this.form.trademark_litigation,
            trademark_objection: this.form.trademark_objection,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.clearDesc = 1;
          this.form = {
            title: "",
            online_time: "",
            content: "",
            tpic: "",
            myorder: "",
          };
        } else {
          await lawAdd({
            content: this.form.content,
            myorder: this.form.myorder,
            type: this.form.type,
            country: this.form.country,
            patent_desc: this.form.patent_desc,
            patent_apply: this.form.patent_apply,
            patent_litigation: this.form.patent_litigation,
            patent_objection: this.form.patent_objection,
            trademark_apply: this.form.trademark_apply,
            trademark_litigation: this.form.trademark_litigation,
            trademark_objection: this.form.trademark_objection,
          });
          this.clearDesc = 1;
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.form = {
            title: "",
            online_time: "",
            content: "",
            tpic: "",
            myorder: "",
          };
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle() {
      this.dialogVisible = false;
      this.clearDesc = 1;
      this.form = {
        title: "",
        online_time: "",
        content: "",
        tpic: "",
        myorder: "",
      };
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const resUser = await lawList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.getLIst(currentPage)
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mini{
  height: 69.5vh;
}
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
</style>